<template>
    <div class="rule_content">
        <div class="r" v-for="(item,index) in data" :key="'rule'+index" :style="{height:(100/data.length)+'%'}">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="numbers">
            <p style="bottom:0;">0K</p>
            <p v-for="(item,index) in data" :style="{bottom:(item*(100/data.length))+'%'}" :key="'number'+index">
                {{item*10}}K
            </p>
        </div>
        <div class="cursor" :style="{bottom:cursor}"></div>
    </div>
</template>

<script>
export default {
    name:"rule",
    props:['number'],
    data:()=>{
        return {
            data:[1],
            cursor:'0%'
        }
    },
    watch:{
        number:{
            handler(nVal){
                if(nVal){
                    this.getData(nVal);
                }
            },
            immediate: true
        }
    },
    methods:{
        getData(val){
            if(val==0){
                this.data=[1];
                this.cursor="0%";
            }else{
                var d = [],c="0%";
                var max = Math.ceil(val/100000);
                d = Array.from(Array(max)).map((item,index)=>index+1);
                c = (val/(100000*max)*100).toFixed(2)+"%";
                this.data = d;
                this.cursor = c;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.rule_content{
    width:100%;
    height:100%;
    position: relative;
    padding:0;
    margin:0;
    .r{
        position: relative;
        margin-left:1.54rem;
        height:50%;
        &:first-of-type{
            &::before{
                position: absolute;
                width: 1.54rem;
                height:10%;
                top:0;
                left:0;
                content:"";
                border-top:1px solid #BED7FAa1;
            }
        }        
        >div{
            height:20%;
            width:0.752rem;
            border-bottom:1px solid #BED7FAa1;
            &:last-of-type{
                width:1.54rem;
            }
        }
    }
    .numbers{
        position: absolute;
        top:0;
        left:0;
        height:100%;
        p{
            font-size:1rem;
            position: absolute;
        }
    }
    .cursor{
        width: 0;
        height: 0;
        border: 0.5rem solid;
        border-color:transparent #04a0fe  transparent transparent;
        position: absolute;
        left: 3rem;
    }
}
</style>